<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>主页</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="keywords" name="keywords" content="" />
    <meta http-equiv="description" name="description" content="" />
    <link href="css/ydui.css" rel="stylesheet" />
    <link href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css" rel="stylesheet">
    <script src="js/ydui.flexible.js"></script>
	<link rel="stylesheet" type="text/css" href="css/all.css?v=201850002"/>
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_379511_w4u7dyknvu.css"/>
</head>
	<body>
		<div class="g-flexview"  id="app" v-cloak>
			<div class="g-scrollview">		
				<div class="index-content">
					<img src="img/admin.jpg" style=""/>
					<p class="name">{{name}}</p>
					<p class="type">沙盘学生</p>
				</div>
				<article class="m-list list-theme4">
		            <a v-on:click="href(el)" class="list-item" v-for="el in datalist">                
		                <div class="list-mes">
		                    <h3 class="list-title">{{el.name}}</h3>
		                    <div class="list-mes-item">
		                        <div>
		                        	创建人:
		                            <span class="list-price">{{el.realName}}</span>
		                        </div>
		                        <div>上课人数：{{el.personCount}}人</div>
		                    </div>
		                </div>
		                <div class="list-button">
		                	<p v-on:click="post($event,el)" v-if="el.isJoin==0">点击报名</p>
		                	<p class="change"  v-if="el.isJoin==1">已报名</p>
		                </div>		                
		            </a>
		        </article>				
			</div>
			<footer class="m-tabbar tabbar-fixed">
	            <a href="index.html" class="tabbar-item tabbar-active">
	                <span class="tabbar-icon">
	                    <i class="iconfont icon-kaike"></i>
	                </span>
	                <span class="tabbar-txt">开课列表</span>
	            </a>
	            <a href="mycourse.html" class="tabbar-item">
	                <span class="tabbar-icon">
	                    <i class="iconfont icon-kecheng1"></i>
	                </span>
	                <span class="tabbar-txt">我的课程</span>
	            </a>

	        </footer>			
		</div>
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="js/ydui.js"></script>
	<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var model = new Vue({
			el:"#app",
			data:{
				name:ComFunJS.getCookie('realName'),
				datalist:[],
			},
			methods:{
	        	get:function(){
	        		ComFunJS.getJSON(ComFunJS.APIURL('/course/join'),function(r){			
	        			if(!r.error){
	        				model.datalist=r;
	        			}
	        		})
	        	},
	        	href:function(el){      		
	        		localStorage.setItem('content',JSON.stringify(el));
	        		window.location.href='listdetail.html'
	        	},
				post:function(e,el){		
					if (e && e.stopPropagation) {
					　　e.stopPropagation(); 
					} 
					else {
						window.event.cancelBubble = true; 
					} 	  					
					ComFunJS.postJSON(ComFunJS.APIURL('/course/student/join'),{"courseId":el.courseId,},function(r){
						if(!r.error){
							ComFunJS.showMsg('报名成功','success')
	    					model.get()
						}else{
							ComFunJS.showMsg(r.message,'error')					
						}
						
					})
				},	        	
	        	iniit:function(){
	        		this.$nextTick(function(){
	        			model.get()
	        		})
	        	}
			},
			created:function(){
				this.iniit()
			}
		})
	</script>
</html>
